<template>
  <h3>{{ type === -1 ? "提交" : "编辑" }}</h3>
  <span>标题:</span>
  <input
    type="text"
    class="title"
    placeholder="请输入代办标题"
    v-model="titleValue"
  />
  <span>日期:</span>
  <input type="date" class="date" v-model="dateValue" />
  <br />
  <button @click="add">提交</button>
  <br />
  <button @click="reset">添加</button>
  <br />

  <table>
    <thead>
      <tr id="title">
        <th>标题</th>
        <th>日期</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="container" @scroll="onScroll">
      <div id="content" :style="{ height: list.length * 30 + 'px' }">
        <div
          id="placeholder"
          :style="{ height: currentIndex * 30 + 'px' }"
        ></div>
        <tr
          id="li"
          v-for="(item, index) in currentList"
          :key="item.id"
          draggable="true"
          @dragstart="handleDragStart($event, index)"
          @dragover="handleDragOver"
          @drop="handleDrop($event, index)"
        >
          <td>{{ item.titleValue }}</td>
          <td>{{ item.dateValue }}</td>
          <td>
            <button @click="edit(index)">编辑</button>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </div>
    </tbody>
  </table>
</template>
<script setup>
import { reactive, toRefs, watch, onMounted, computed } from "vue";
// 将titleValu，dateValue，list，index设置响应式
const state = reactive({
  titleValue: "",
  dateValue: "",
  list: [],
  type: -1,
  currentIndex: 0,
});
//利用toRefs将state中的属性转换为响应式的对象
const { titleValue, dateValue, list, type, currentIndex } = toRefs(state);
// 获取本地存储中的list
onMounted(() => {
  // 初始化一个1000条数据
  for (let i = 0; i < 1000; i++) {
    state.list.push({
      titleValue: "标题" + i,
      dateValue: "2021-01-01",
      id: i,
    });
  }
  if (localStorage.getItem("list")) {
    state.list = JSON.parse(localStorage.getItem("list"));
  }
});

// 计算属性
const currentList = computed(() => {
  return state.list.slice(state.currentIndex, state.currentIndex + 10);
});
// 添加
const add = () => {
  if (state.type === -1) {
    state.list.push({
      titleValue: state.titleValue,
      dateValue: state.dateValue,
      id: Date.now(),
    });
  } else {
    state.list[state.type].titleValue = state.titleValue;
    state.list[state.type].dateValue = state.dateValue;
    state.type = -1;
  }
  reset();
};
// 重置
const reset = () => {
  state.titleValue = "";
  state.dateValue = "";
  state.type = -1;
};
// 编辑,数据回填
const edit = (index) => {
  state.titleValue = currentList.value[index].titleValue;
  state.dateValue = currentList.value[index].dateValue;
  state.type = index;
};
// 删除
const del = (index) => {
  // 删除当前页的数据
  state.list.splice(state.currentIndex + index, 1);
};
// 将list存储到本地存储中
watch(
  () => state.list,
  (newVal) => {
    localStorage.setItem("list", JSON.stringify(newVal));
    console.log(11111111);
  },
  { deep: true }
);

// 滚动事件
const onScroll = (e) => {
  const scrollTop = e.target.scrollTop;
  state.currentIndex = Math.floor(scrollTop / 30);
};

// 拖拽事件
const handleDragStart = (event, index) => {
  console.log(index);
  event.dataTransfer.setData("text/plain", index + state.currentIndex);
};

// 拖拽结束
const handleDragOver = (event) => {
  event.preventDefault();
};

// 拖拽放下
const handleDrop = (event, targetIndex) => {
  event.preventDefault();
  const sourceIndex = parseInt(event.dataTransfer.getData("text/plain"));
  const temp = state.list[sourceIndex];
  state.list.splice(sourceIndex, 1);
  state.list.splice(targetIndex + state.currentIndex, 0, temp);
};
</script>

<style>
#container {
  display: block;
  height: 300px;
  overflow-y: auto;
}
#content {
  overflow: hidden;
}
tr {
  width: 500px;
  height: 30px;
  display: block;
}
button {
  height: 30px;
  font-size: 14px;
}
#li td {
  width: 166px;
  height: 30px;
}
#title th {
  width: 166px;
}
</style>
